<template>
  <div>
    <h3>ErrorBoundaryDemo</h3>

    <ErrorBoundary :emitError="true" @error="handleError">
      <template #default>
        <ChildComponent />
      </template>

      <template #fallback="sp">
        <div>
          <h1 :style="{ color: 'red' }">劳资希望子组件这样渲染error数据</h1>
          <p>error:{{ sp.error }}</p>
          <p>info:{{ sp.info }}</p>
        </div>
      </template>

    </ErrorBoundary>

    <p v-if="hasError">发生错误：{{ errorMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";
import ErrorBoundary from "./ErrorBoundary.vue";

export default {
  components: {
    ErrorBoundary,
    ChildComponent,
  },
  data() {
    return {
      hasError: false,
      errorMessage: "",
    };
  },

  methods: {
    handleError(error, info) {
      // 处理错误
      console.error("EBDemo 接收到error：", error);
      console.error("EBDemo 接收到错误info：", info);

      // 设置错误状态和消息
      this.hasError = true;
      this.errorMessage = error.message;
    },
  },
};
</script>
